import React, {useEffect, useState} from 'react';
import './index.css'
/*
import u249 from "./image/规划.png"
import u260 from "./image/战略.png"
import u270 from "./image/技术.png"
import u281 from "./image/u281.png"
import u292 from "./image/市场.png"
import u209 from "./image/科学.png"
 */

import u249 from "./image/1.png"
import u260 from "./image/2.png"
import u270 from "./image/3.png"
import u281 from "./image/u281.png"
import u292 from "./image/4.png"
import u209 from "./image/5.png"

import http from "../../../util/http";
import {getTermTranslation} from "../../../util/language";
import {useAppContext} from "../../../App";
import {useNavigate} from "react-router-dom";

function Business(props) {
    const [data,setData] = useState([]);
    let navigate = useNavigate();
    const { selectTab, setSelectTab,selectLanguage, setSelectLanguage } = useAppContext();
    useEffect(() => {
        http.doGet('/model/data/get', {type: "business"}).then(res => {
            if (res.status === 200) {
                setData(res.data)
            }
        })
    }, [])

    function toPage(url, page, text, params, event) {
        if(url !== '/home'){
            setSelectTab('')
        }
        navigate(url, {
            replace: false,
            state: {params, page, text}
        })
        if (event != null){
            event.stopPropagation();
        }
    }

    return (
        <div className="business-main">
            <div className="business-title">{getTermTranslation(selectLanguage,'业务范围')}</div>
            <div className="business-content">
                <div className="business-content-one"
                     onClick={(event) => {
                         toPage("/portal/planning", "business", getTermTranslation(selectLanguage,'规划编制'), {dirId: "295,409"}, event)
                     }}
                >
                    <div className="content">
                        <div style={{
                            height: '70px',
                            position: 'relative',
                            display: 'inline-block'
                        }}>
                            <img style={{marginTop: '30px'}} src={u249} alt="图片"/>
                            <div style={{fontSize: 16 ,marginTop: 15, textAlign: 'center',fontWeight: 700}}>
                                {data.length > 0 ? data[0].name : ''}
                            </div>

                        </div>
                        {/*<div className="header">{data.length > 0?data[0].name:""}</div>*/}
                        {/*<div className="info">*/}
                        {/*    <span*/}
                        {/*        className="text">{data.length > 0?data[0].desc: ""}</span>*/}
                        {/*</div>*/}
                    </div>
                </div>
                <div className="business-content-one"
                     onClick={(event) => toPage("/portal/strategy", "business", getTermTranslation(selectLanguage,'战略研究'), {dirId: "296,411"}, event)}
                >
                    <div className="content">

                        <div style={{
                            height: '70px',
                            position: 'relative',
                            display: 'inline-block'
                        }}>
                            <img style={{marginTop: '30px'}} src={u260} alt="图片"/>
                            <div style={{fontSize: 16, marginTop: 15, textAlign: 'center', fontWeight: 700}}>
                                {data.length > 1 ? data[1].name : ''}
                            </div>
                        </div>


                        {/*<div className="header">{data.length > 1 ? data[1].name : ""}</div>*/}
                        {/*<img src={u260} alt="图片"/>*/}
                        {/*<div className="info">*/}
                        {/*    <span*/}
                        {/*        className="text">{data.length > 1 ? data[1].desc : ""}</span>*/}
                        {/*</div>*/}


                    </div>
                </div>
                <div className="business-content-one"
                     onClick={(event) => toPage("/portal/review", "business", getTermTranslation(selectLanguage, '技术审查'), {dirId: "297,413"}, event)}
                >
                    <div className="content">

                        <div style={{
                            height: '70px',
                            position: 'relative',
                            display: 'inline-block'
                        }}>
                            <img style={{marginTop: '30px'}} src={u270} alt="图片"/>
                            <div style={{fontSize: 16, marginTop: 15, textAlign: 'center', fontWeight: 700}}>
                                {data.length > 2 ? data[2].name : ''}
                            </div>
                        </div>


                        {/*<div className="header">{data.length > 2 ? data[2].name : ""}</div>*/}
                        {/*<img src={u270} alt="图片"/>*/}
                        {/*<div className="info">*/}
                        {/*    <span*/}
                        {/*        className="text">{data.length > 2 ? data[2].desc : ""}</span>*/}
                        {/*</div>*/}
                    </div>
                </div>
                {/*<div className="business-content-one"*/}
                {/*     onClick={(event) => toPage("/portal/industry", "business", getTermTranslation(selectLanguage,'行业管理'), {dirId: "298,415"}, event)}*/}
                {/*>*/}
                {/*    <div className="content">*/}
                {/*        <div className="header">{data.length > 3?data[3].name:""}</div>*/}
                {/*        <img src={u281} alt="图片"/>*/}
                {/*        <div className="info">*/}
                {/*            <span*/}
                {/*                className="text">{data.length > 3?data[3].desc:""}</span>*/}
                {/*        </div>*/}
                {/*    </div>*/}
                {/*</div>*/}
                <div className="business-content-one"
                     onClick={(event) => toPage("/portal/services", "business", getTermTranslation(selectLanguage,'市场服务'), {dirId: "299,417"}, event)}
                >
                    <div className="content">

                        <div style={{
                            height: '70px',
                            position: 'relative',
                            display: 'inline-block'
                        }}>
                            <img style={{marginTop: '30px'}} src={u292} alt="图片"/>
                            <div style={{fontSize: 16, marginTop: 15, textAlign: 'center', fontWeight: 700}}>
                                {data.length > 4 ? data[4].name : ''}
                            </div>
                        </div>

                        {/*<div className="header">{data.length > 4 ? data[4].name : ""}</div>*/}
                        {/*<img src={u292} alt="图片"/>*/}
                        {/*<div className="info">*/}
                        {/*    <span*/}
                        {/*        className="text">{data.length > 4 ? data[4].desc : ""}</span>*/}
                        {/*</div>*/}
                    </div>
                </div>
                <div className="business-content-one"
                     onClick={(event) => toPage("/portal/research", "business", getTermTranslation(selectLanguage, '科学研究'), {dirId: "300,419"}, event)}
                >
                    <div className="content">

                        <div style={{
                            height: '70px',
                            position: 'relative',
                            display: 'inline-block'
                        }}>
                            <img style={{marginTop: '30px'}} src={u209} alt="图片"/>
                            <div style={{fontSize: 16, marginTop: 15, textAlign: 'center', fontWeight: 700}}>
                                {data.length > 5 ? data[5].name : ''}
                            </div>
                        </div>


                        {/*<div className="header">{data.length > 5 ? data[5].name : ""}</div>*/}
                        {/*<img src={u209} alt="图片"/>*/}
                        {/*<div className="info">*/}
                        {/*    <span*/}
                        {/*        className="text">{data.length > 5 ? data[5].desc : ""}</span>*/}
                        {/*</div>*/}


                    </div>
                </div>
            </div>
        </div>
    );
}

export default Business;
